<script lang="jsx">
import targetContentDetail from './targetContentDetail'

export default {
  name: 'targetDetail',
  props: {
    placement: {
      type: String,
      default: 'bottom'
    },
    data: {
      type: Object,
      default: () => ({})
    },
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  components: { targetContentDetail },
  data() {
    return {
      visible: false
    }
  },
  render() {
    const show = () => {
      if (!this.visible) {
        console.log('--------------true')
        this.visible = true
      }
    }
    return (
      <el-popover
        placement={this.placement}
        teleported={this.appendToBody}
        effect="light"
        trigger="hover"
        popper-class="ks_target_detail_popover"
        onShow={show}
        v-slots = {{
          reference: () => this.$slots.default?.()
        }}>
        {
          this.visible &&
          <target-content-detail data={this.data} is-show-name={true}/>
        }
      </el-popover>
    )
  }
}
</script>
<style>
.ks_target_detail_popover{
  width: 360px !important;
  padding: 0 !important;
}
</style>
